<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <el-row>
          <el-col v-if="userInfo.role ==='1'" :span="8">
            <el-form-item label="部门名称">
              <el-select
                v-model="searchForm.unitName"
                placeholder="请选择"
              >
                <el-option v-for="item in unitList" :key="item.unitName" :label="item.unitName" :value="item.unitName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额">
              <el-input
                v-model="searchForm.totalAmount"
                placeholder="请输入金额"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别">
              <el-select
                v-model="searchForm.sortName"
                placeholder="请选择"
              >
                <el-option v-for="item in sortList" :key="item.sortName" :label="item.sortName" :value="item.sortName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input
                v-model="searchForm.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期">
              <el-date-picker
                v-model="createdTime"
                end-placeholder="结束日期"
                placeholder="选择日期"
                range-separator="至"
                start-placeholder="开始日期"
                style="width: 100%"
                type="daterange"
                value-format="yyyy-MM-dd"
                @change="onChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="userInfo.role ==='1' ? 8 : 16" class="text-right">
            <el-button
              icon="iconfont iconxianxing_sousuo"
              type="primary"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button
              icon="iconfont iconxianxing_zhongzhi"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-col>
          <el-col :span="24" class="text-left">
            <el-button type="primary" @click="onAddInBound">
              新增入库单
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table
        ref="table"
        :current-page="page"
        :header-data="tableHeader"
        :index="false"
        :loading="loading"
        :page-size="limit"
        :table-data="tableData"
        :total="total"
        class="data-table"
        style="width: 100%"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
      />
    </el-main>
    <el-drawer :title="title" :visible.sync="drawerVisible">
      <div class="drawer-main">
        <el-form ref="form" :model="form" label-position="top" label-width="80px">
          <el-form-item label="类型名称">
            <el-input v-model="form.sortName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" placeholder="请输入" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="type!=='look'" class="drawer-footer">
        <div class="footer-btn">
          <el-button type="primary" @click="handleSubmit"> 确认</el-button>
          <el-button @click="drawerVisible = false"> 取消</el-button>
        </div>
      </div>
    </el-drawer>
  </el-container>
</template>

<script>
import addTable from '@/mixins/addtable'
import { getInBoundList, getSortList, getUnitList, postInBoundDelete } from './api'
import { parseTime } from '@/utils'
import { mapGetters } from "vuex";

export default {
  name: 'Inbound',
  mixins: [addTable],
  data () {
    return {
      createdTime: '',
      searchForm: {
        unitName: '',
        sortName: '',
        totalAmount: '',
        createdTime: []
      },
      title: '',
      type: 'look',
      tableHeader: [],
      personOptions: [],
      oneLoading: false,
      drawerVisible: false,
      sortList: [],
      unitList: [],
      form: {
        sortId: '',
        sortName: '',
        sortType: '',
        remark: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
    ])
  },
  async created () {
    this.tableHeader = [
      {
        prop: 'unitName',
        label: '部门名称',
        sortable: false,
        overflow: true,
      },
      {
        prop: 'dateTime',
        label: '日期',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          const time = parseTime(vm.dateTime, '{y}-{m}-{d}')
          return <span>{time}</span>
        }
      },
      {
        prop: 'sortName',
        label: '类别',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'number',
        label: '编号',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        prop: 'totalAmount',
        label: '合计金额',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          return <span>{vm.totalAmount}元</span>
        }
      },
      // {
      //   prop: 'manager',
      //   label: '主管',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      {
        prop: 'warehouse',
        label: '仓库',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      // {
      //   prop: 'accountName',
      //   label: '记账',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      // {
      //   prop: 'handledName',
      //   label: '经手人',
      //   sortable: false,
      //   overflow: true,
      //   align: 'left'
      // },
      {
        prop: 'createdTime',
        label: '创建时间',
        sortable: false,
        overflow: true,
        align: 'left',
        render: (h, vm) => {
          const time = parseTime(vm.createdTime)
          return <span>{time}</span>
        }
      },
      {
        prop: 'remark',
        label: '备注',
        sortable: false,
        overflow: true,
        align: 'left'
      },
      {
        width: 180,
        label: '操作',
        align: 'left',
        fixed: 'right',
        buttonList: (row, index) => {
          return this.userInfo.userName === 'admin'
         ? [
            {
              text: '预览打印',
              type: 'text',
              event: this.onDetail
            },
            {
              text: '编辑',
              type: 'text',
              event: this.onEdit
            },
            {
              text: '删除',
              type: 'text',
              event: this.onDelete
            }
          ] : [
            {
              text: '预览打印',
              type: 'text',
              event: this.onDetail
            },
            {
              text: '编辑',
              type: 'text',
              event: this.onEdit
            }
          ]
        }

      }
    ]
    this.getTableData()
    await this.getInitData()
  },

  methods: {
    onChange (date) {
      if (date) {
        const dateMin = date[0] + " 00:00:00"
        const dateMax = date[1] + " 23:59:59"
        const timestampMin = new Date(dateMin).getTime();
        const timestampMax = new Date(dateMax).getTime();
        this.searchForm.createdTime = [timestampMin, timestampMax]
      }
    },
    async getInitData () {
      const { data } = await getUnitList({
        page: 1,
        limit: 1000
      })
      this.unitList = data
      const res = await getSortList({
        page: 1,
        limit: 1000,
        sortType: '1' // 类型
      })
      this.sortList = res.data
    },
    onAddInBound () {
      this.$router.push('inBoundAdd')
    },
    onEdit (row) {
      this.$router.push({
        name: 'inBoundAdd',
        query: {
          id: row.id
        }
      })
    },
    onDetail (row) {
      this.$router.push({
        name: 'inBoundView',
        query: {
          id: row.id
        }
      })
    },
    onDelete (row) {
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postInBoundDelete({ id: row.id })
            .then(({ success, message }) => {
              if (success) {
                this.$message.success(message)
              } else {
                this.$message.error(message)
              }
              this.getTableData()
            })
            .catch()
      })
    },
    getTableData () {
      this.loading = true
      this.getTableParams()
      getInBoundList(this.tableParams)
          .then((res) => {
            if (!res) return
            const { data, pageInfo } = res
            setTimeout(() => {
              this.loading = false
              this.tableData = data
              this.total = pageInfo.total
            }, 500)
          })
          .catch((err) => {
            console.log('TCL: getTableData -> err', err)
          })
    },
    handleReset () {
      this.createdTime = ''
      this.searchForm = {}
      this.getTableData()
    }
  }
}
</script>
